{% extends 'app/appbase.html' %}
{% load static %}

{% block leftside %}
<div class="ui raised segment items">
    <div class="item">
        <div class="content">
            <div class="header">
                <h1 class="ui header">
                    {{ article.title }}
                </h1>
            </div>
            <div class="meta">
                <span class=""><i class="write icon"></i>{{ article.author }}</span>
                <span class=""><i class="calendar icon"></i>{{ article.add_time }}</span>
                <span class="right floated">阅读次数：{{ article.read_num }}</span>
            </div>
            <div class="description">
                <span>分类：</span>
                {% for category in article.show_categories %}
                <span class="ui teal basic label">{{ category.name }}</span>
                {% endfor %}

                {% if article.show_tags %}
                    {% for tag in article.show_tags%}
                    <span class="ui teal tag label right floated">{{ tag.name }}</span>
                    {% endfor %}
                {% endif %}

                <div class="ui divider"></div>

                <div class="content" id="content">{{ article.content }}</div>
                
                <h4 class="ui horizontal divider header">
                    <i class="comments icon"></i>{% if not article.allow_comment %}作者关闭了{% endif %}评论
                </h4>
                {% if article.allow_comment %}
                <div id="comments">
                    <input type="hidden" value={{ article.id }} id="articleId"/>
                    <comment-component v-for="commentid in commentIds" :commentid="commentid" :key="commentid"></comment-component> 
                    <form class="ui reply form">
                        {% csrf_token %}
                        <div class="field"><textarea v-model="commentContent"></textarea></div>
                        <div v-if="submitLoading"> 
                            <div class="ui loading button" disabled>发表评论</div>
                        </div>
                        <div v-else>
                            <div class="ui primary submit labeled icon button" @click="articleComment({{visitor.id}},{{article.id}})"><i class="icon edit"></i>发表评论</div>
                        </div>
                    </form>
                </div>
                {% endif %}

            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script type="text/x-template" id="comment-component">
    <div class="ui comments">
        <div class="comment">
            <a class="avatar"><img :src="visitor.avatar_url" /></a>
            <div class="content">
                <a class="author" v-html="visitor.name"></a>
                <div class="metadata"><div class="date" v-html="comment.add_time"></div></div>
                <div class="text" v-html="comment.content"></div>
                <div class="actions">
                    <a class="reply" @click="showReplyForm">回复</a>
                </div>
                <form class="ui reply form" v-show="formShow" >
                    {% csrf_token %}
                    <div class="field"><textarea v-model="commentContent"></textarea></div>
                    <div v-if="submitLoading"> 
                        <div class="ui loading button" disabled>发表评论</div>
                    </div>
                    <div v-else>
                        <div class="ui primary submit labeled icon button" @click="replyComment(commentid,{{visitor.id}},{{article.id}})"><i class="icon edit"></i>发表评论</div>
                    </div>
                </form>
            </div>
            <comment-component v-if="hasComments" v-for="commentId in commentIds" :commentid="commentId" :key="commentid"></comment-component> 
        </div>
    </div>
</script>

<script src="{% static 'libs/markdown-it.min.js' %}"></script>
<script src="{% static 'libs/axios.min.js' %}"></script>
<script src="{% static 'libs/qs.js' %}"></script>
<script src="{% static 'libs/js.cookie.js' %}"></script>
<script>
var md = window.markdownit({breaks:true,html:true,linkify:true,typographer:true});
var content = md.render($("#content").html());
$("#content").html(content);
</script>
<script src="{% static 'js/app/article.js' %}"></script>

{% endblock %}
